<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLX</title>
    <style>
        body {
            background-color: black;
        }

        #container {
            width: 800px;
            height: 50px;
            margin: 80px 0 auto 100px;
            cursor: pointer;
        }

        #infoPanel {
            color: white;
            font-size: 15px;
            margin: 40px 0 auto 100px;
        }

        #maxMemoryInfo {
            width: 100%;
            height: 100%;
            color: white;
            font-size: 30px;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            position: relative;
            background-color: #1e3799;
            overflow: hidden;
            border-radius: 50px;
        }

        #usedMemoryInfo {
            background-color: #6e6eff;
            height: 100%;
            width: 0;
            transition: all .5s ease;
            position: absolute;
        }

        #realUsedMemoryInfo {
            background-color: #00a8ff;
            height: 100%;
            width: 0;
            transition: all .5s ease;
            position: absolute;
        }

        #ratio {
            position: relative;
            left: 10px;
            line-height: 50px;
            z-index: 99999;
        }

        /*****************************************************/
        #systemInfoContainer {
            margin: 40px 0 auto 100px;
        }

        #systemInfoContainer > div {
            width: 800px;
            height: 400px;
        }

        @media screen and (max-width: 800px) {
            #container {
                margin: 40px auto 0;
                width: 90%;
                height: 30px;
            }

            #infoPanel {
                width: 90%;
                margin: 40px auto 0;
            }

            #ratio {
                position: relative;
                left: 10px;
                line-height: 30px;
                font-size: 20px;
                z-index: 999999;
            }

            /*****************************************************/
            #systemInfoContainer {
                width: 90%;
                margin: 40px auto 0;
            }

            #systemInfoContainer > div {
                width: 100%;
                height: 300px;
            }
        }

    </style>
</head>
<body>
<div id="container">
    <div id="maxMemoryInfo" onclick="finalize()">
        <div id="usedMemoryInfo">
        </div>
        <div id="realUsedMemoryInfo">
        </div>
        <span id="ratio"></span>
    </div>
</div>
<div id="infoPanel">
    <p id="today"></p>
    <p>今日处理文件数:&emsp;<span id="todayFileTotal"></span></p>
    <p>已使用:&emsp;<span id="usedMem"></span></p>
    <p>已分配:&emsp;<span id="totalMem"></span></p>
    <p>最大堆内存:&emsp;<span id="maxMem"></span></p>
</div>

<div id="systemInfoContainer">
    <div id="sysCpu">

    </div>
    <div id="sysMemory">

    </div>
</div>

</body>
</html>
<script src="/static/jquery-3.6.1.min.js"></script>
<script src="/static/js/echarts.min.js"></script>
<script>
    function readableBytes(bytes) {
        var i = Math.floor(Math.log(bytes) / Math.log(1024)),
            sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
        return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + sizes[i];
    }

    function finalize() {
        $.get('/finalize')
    }

    function startTask() {
        setInterval(function () {
            $.get('/systemInfo', function (data) {
                let jvm = data.jvm;
                let totalMemory = jvm.totalMemory;// 已申请
                let maxMemory = jvm.maxMemory;// 最大
                let freeMemory = jvm.freeMemory;// 已申请部分中可用的部分
                let realUsedMemory = totalMemory - freeMemory;// 实际已使用的
                let realUsedMemoryWidth = Math.min(Math.floor(100 * realUsedMemory / maxMemory), 100) + "%"
                document.querySelector('#realUsedMemoryInfo').style.width = realUsedMemoryWidth;
                // 已申请的内存占比(total/max)
                let usedMemoryWidth = Math.min(Math.floor(100 * totalMemory / maxMemory), 100) + "%";
                document.querySelector('#usedMemoryInfo').style.width = usedMemoryWidth

                $('#ratio').text(realUsedMemoryWidth)
                $('#usedMem').text(realUsedMemory + ` (${readableBytes(realUsedMemory)})`)
                $('#totalMem').text(totalMemory + ` (${readableBytes(totalMemory)})`)
                $('#maxMem').text(maxMemory + ` (${readableBytes(maxMemory)})`)

                /****************************************************************/
                let systemLoad = data.systemLoad;


                for (let index in systemLoad) {

                    // cpu
                    if (cpuData.length >= 10) {
                        cpuData.shift();
                    }
                    cpuData.push({
                        name: 'cpuLoad',
                        value: [systemLoad[index].time, systemLoad[index].cpuLoad]
                    })

                    // 内存
                    if (memData.length >= 10) {
                        memData.shift()
                    }
                    memData.push({
                        name: 'memLoad',
                        value: [systemLoad[index].time, systemLoad[index].memLoad]
                    })

                }

                // 重设数据
                cpuChart.setOption({
                    series: [
                        {
                            data: cpuData
                        }
                    ]
                })
                memChart.setOption({
                    series: [
                        {
                            data: memData
                        }
                    ]
                })

            })
        }, 1000)
    }

    function getTodayFileInfo() {
        $.get("/todayFileTotal", function (data) {
            let today = data.today;
            let total = data.total;
            $('#today').text(today)
            $('#todayFileTotal').text(total)
        })
    }


    let cpuData = []
    let memData = []
    let cpuChart = echarts.init(document.getElementById('sysCpu'));
    let memChart = echarts.init(document.getElementById('sysMemory'));

    $(function () {
        getTodayFileInfo()
        startTask();

        document.addEventListener('visibilitychange', function () {
            if (!document.hidden) {
                getTodayFileInfo();
            }
        })

        /******************************Echarts**************************************/

        let cpuOptions = {
            title: {
                text: 'cpu'
            },
            xAxis: {
                type: 'time',
                axisLabel: {
                    interval: 40,
                    rotate: 45
                }
                ,
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                // boundaryGap: [0, '100%'],
                min: 0,
                max: 100,
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: 'cpuInfo',
                    type: 'line',
                    data: cpuData
                }
            ]
        }
        cpuChart.setOption(cpuOptions)

        let memOptions = {
            title: {
                text: 'memory'
            },
            xAxis: {
                type: 'time',
                axisLabel: {
                    interval: 40,
                    rotate: 45
                }
                ,
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 100,
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: 'menInfo',
                    type: 'line',
                    data: memData,
                    areaStyle: {}// 线条下内容填充
                }
            ]
        }
        memChart.setOption(memOptions)

    })


</script>